import React from 'react';
import { AlertTriangle } from 'lucide-react';
import type { ComplianceItem } from '@/types/work';
import RiskCard from './RiskCard';

interface RiskMatrixViewProps {
  risks: ComplianceItem[];
  guaranteeItems: ComplianceItem[];
  onRemoveAssociation: (riskId: string, guaranteeId: string) => void;
  onManageAssociations: (risk: ComplianceItem) => void;
}

/**
 * 风险矩阵视图组件
 * 使用瀑布流卡片布局展示风险项
 */
const RiskMatrixView: React.FC<RiskMatrixViewProps> = ({
  risks,
  guaranteeItems,
  onRemoveAssociation,
  onManageAssociations
}) => {
  // 如果没有风险项，显示空状态
  if (risks.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
        <AlertTriangle className="h-12 w-12 mb-4" />
        <p className="text-lg font-medium">未找到符合条件的风险项</p>
        <p className="text-sm mt-2">请尝试调整筛选条件或添加新的风险项</p>
      </div>
    );
  }
  
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      {risks.map(risk => (
        <RiskCard
          key={risk.id}
          risk={risk}
          guaranteeItems={guaranteeItems}
          onRemoveAssociation={onRemoveAssociation}
          onManageAssociations={onManageAssociations}
        />
      ))}
    </div>
  );
};

export default RiskMatrixView;
